<template>
  <div class="nav module">
    <router-link tag="div" class="tab-item" to="/articleColumn">
           <span class="tab-link tab_grp">
              <span class="iconfont icon-articlepage-icon"></span>
               <span>文章专栏</span>
           </span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/psyTest">
              <span class="tab-link tab_grp">
                <span class="iconfont icon-test-icon"></span>
                <span>心理测试</span>
              </span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/psyFm">
            <span class="tab-link tab_grp">
               <span class="iconfont icon-fm-icon"></span>
               <span>心象FM</span>
             </span>
    </router-link>
  </div>
</template>

<script>
  export default {
    name:'HomeNav',
  }
</script>

<style scoped>
  .module {
    padding: 0 25px;
  }
  .nav {
    height: 220px;
  }
  .nav div {
    width: 33.3%;
    float: left;
    text-align: center;
  }

  .tab_grp span {
    display: block;
  }

  .nav .tab_grp span:nth-of-type(2) {
    color: #686868;
    font-size: 28px;

  }

  .tab_grp .iconfont {
    font-size: 100px;
    margin-top: 30px;
    margin-bottom: 15px;
  }

  .icon-articlepage-icon {
    color: #54e399;
  }

  .icon-test-icon {
    color: #ff9fa0;
  }

  .tab_grp .icon-fm-icon {
    color: #2ae0fc;
  }
</style>
